<template>
    <el-form
        :model="register" 
        status-icon 
        :rules="rules" 
        ref="ruleForm" 
        label-width="100px" 
    >   
        <el-form-item label="手机号码" prop="mobile">
            <el-input type="text" v-model="register.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="register.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="register.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="quepass">
            <el-input type="password" v-model="register.quepass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="danger"  @click="submitForm('ruleForm')">注册</el-button>
            <el-button type="info"  @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>


<script>
import {validate} from "@/utils";
import {bus } from "@/utils/bus"
export default {
    name:'register',
    data(){
        return {
            register:{

            },
            rules:{
                mobile:[
                    {
                        required:true,
                        message:"请输入你的手机号码",
                        trigger:'blur'
                    },
                    {
                        validator:(rule, value, callback)=>{
                            if(validate.mobile.test(value)){
                                callback();
                            }else{
                                callback(new Error("请输入正确的手机号码"));
                            }
                        },trigger:'blur'
                    }
                ],
                username:[
                    {
                        required:true,
                        message:"请输入你的用户名",
                        trigger:'blur'
                    },
                ],
                pass:[
                    {
                        required:true,
                        message:"请输入你的密码",
                        trigger:'blur'
                    },
                    // {
                    //     min:4,
                    //     max:12,
                    //     message:"密码只能4到12位",
                    //     trigger:'blur'
                    // },
                    {
                        validator:(rule,value,callback)=>{
                            if(value.length<4){
                                callback(new Error("密码不能小于4位"));
                            }else if(value.length>12){
                                callback(new Error("密码不能大于12位"));
                            }else{
                                // 一致性
                               if(value!==this.register.quepass){
                                    this.$refs.ruleForm.validateField("quepass");
                                }else{
                                    callback();
                                }
                            }
                        },
                        trigger:'change'
                    }
                ],
                quepass:[
                    {
                        required:true,
                        message:"请再次输入你的密码",
                        trigger:'blur'
                    },
                    // {
                    //     min:4,
                    //     max:12,
                    //     message:"密码只能4到12位",
                    //     trigger:'blur'
                    // },
                    {
                        validator:(rule,value,callback)=>{  // 保留this 指向
                            if(value.length<4){
                                callback(new Error("密码不能小于4位"));
                            }else if(value.length>12){
                                callback(new Error("密码不能大于12位"));
                            }else{
                                // 一致性

                                if(value!==this.register.pass){
                                     callback(new Error("两次输入密码不一致!"));
                                }else{
                                    callback();
                                }
                            }
                        },
                        trigger:'blur'
                    }
                ]
            }
        }
    },
    methods:{
        resetForm(){
            this.$refs.ruleForm.resetFields();
        },
        submitForm(formname){
            this.$refs[formname].validate(valid=>{
                if(valid){
                    // console.log(valid);
                    // console.log(this.register);
                    this.register.rolltype = "1";    // 只能注册学生 
                    this.$axios.post("/vue/signup",this.register)
                    .then(res=>{
                       if(res.data.type){
                            //  注册成功  跳转登录 
                            this.$emit("changeactive",'login');
                            bus.$emit("sendMobile",res.data.result[0].mobile);
                       }
                    })
                    // 请求ajax 
                }else{
                    console.log('error submit!!');
                    this.$message.error("请先完善信息...")
                    return false;
                }
            })
        }
    }
}
</script>

